<div class="layui-fluid" id="client-chart-index" lay-title="客户管理">
	<div class="layui-col-xs12">
		<div class="layui-card">
			<div class="layui-tab layui-tab-brief clientBlock" lay-filter="index-order">
				<!-- <ul class="layui-tab-title">
					<li class="layui-this">用户管理</li>
				</ul> -->
				<div class="nepadmin-pad-t10 nepadmin-pad-b10 nepadmin-pad-l10 nepadmin-pad-r10 searchBlock">
					<div class="layui-btn actionBtn AddClientBtn">添加客户</div>
					<form class="searchForm layui-form" lay-filter="searchClientForm">
						<input class="layui-input searchItem" name="name" placeholder="姓名" />
						<button class="layui-btn actionBtn" lay-submit lay-filter="searchClientForm">查询</button>
					</form>
				</div>
				<div class="layui-tab-content" style="padding:0;">
					<div class="layui-tab-item layui-show nepadmin-table-full">
						<table lay-filter="client-table"></table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<script type="text/html" id="clientIndexAction">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
	layui.use(['admin','form', 'element', 'table'],function(admin, form, element, table) {
	var $ = layui.jquery
	var view = $('#client-chart-index')
	var editObj = '';
	var tableClientObj = '';
	element.render('progress')
	
	tableClientObj = table.render({
		size: 'nob',
		elem: '[lay-filter="client-table"]',
		url: apiUrl + '/index.php/agricultural/user/index?token=' + JSON.parse(window.sessionStorage.getItem('agricultural')).token,
		limit: 15,
		method: 'POST',
		page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
			layout: ['prev', 'page', 'next', 'count', 'skip', 'limit'] //自定义分页布局
			,first: false //不显示首页
			,last: false //不显示尾页
			,limits: [15, 20, 30, 40, 50, 60]
		},
		cols: [[
			{title: '姓名', field: 'name', align: 'center', minWidth: '100' },
			{title: '电话', field: 'mobile', align: 'center', minWidth: '150' },
			{title: '地址', field: 'address', align: 'center', minWidth: '200' },
			{title: '种植品种', field: 'variety', align: 'center', minWidth: '100' },
			{title: '种植面积', field: 'area', align: 'center', minWidth: '100' },
			{title: '棚架架式', field: 'shack_type', align: 'center', minWidth: '100' },
			{title: '垄宽', field: 'ridge_width', align: 'center', minWidth: '100' },
			{title: '种植土壤条件', field: 'soil_condition', align: 'center', minWidth: '200' },
			{title: '操作',  toolbar: '#clientIndexAction', align: 'center', minWidth: '200' },
		]],
		done: function(res){
			// console.log(res)
			if(res.code == 2){
				tokenExpired()
			}
		}
	})

	
	
	// 查询
	form.on('submit(searchClientForm)', function (data) {
		tableClientObj.reload({
			where:data.field,
			page: {
				curr: 1 //重新从第 1 页开始
			}
		})
	    return false;
	});
	
	table.on('tool(client-table)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
	  var data = obj.data; //获得当前行数据
	  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
	  // console.log(data)
	 
	  if(layEvent === 'del'){ //删除
		layer.confirm('确定要删除这一条数据吗', function(index){
		  
		  //向服务端发送删除指令
		  $.ajax({
		    url: apiUrl + '/index.php/agricultural/user/delData?token=' + JSON.parse(window.sessionStorage.getItem('agricultural')).token,
		    data:{
				id: data.id
			},
		  	type: 'POST',
		      success:function(res){
		  		// console.log(res)
		  		if(res.code == 0){
					layer.close(index);
		  			layer.closeAll();
		  			layer.msg('删除成功')
					getNavHtml();
					obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
		  		}else if(res.code == 2){
					tokenExpired()
				}else{
		  			layer.msg(res.msg)
		  		}
		          
		      },
		      complete:function(){
		          //loading.hide();
		      }
		  });
		});
	  } else if(layEvent === 'edit'){ //编辑
		$('#addClientFixed input[name=id]').val(data.id);
		$('#addClientFixed input[name=name]').val(data.name);
		$('#addClientFixed input[name=mobile]').val(data.mobile);
		$('#addClientFixed input[name=address]').val(data.address);
		$('#addClientFixed input[name=variety]').val(data.variety);
		$('#addClientFixed input[name=area]').val(data.area);
		$('#addClientFixed input[name=shack_type]').val(data.shack_type);
		$('#addClientFixed input[name=ridge_width]').val(data.ridge_width);
		$('#addClientFixed input[name=soil_condition]').val(data.soil_condition);
		$('#addClientFixed input[name=remark]').val(data.remark);
		form.render();
		// $('#editUserFixed').show();
		var width = isMobile() ? '90%' : '1000px'
		layer.open({
			type: 1,
			title: '修改用户信息',
			area: width,
			content: $('#addClientFixed') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		});
		editObj = obj;
	  }
	});
	
	// 添加弹框
	$('.AddClientBtn').click(function(){
		// $('#addUserFixed').show();
		$('#addClientFixed')[0].reset();
		var width = isMobile() ? '90%' : '1000px'
		layer.open({
			type: 1,
			title: '添加客户信息',
			area: width,
			content: $('#addClientFixed') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		});
	})
	
	// 添加提交
	form.on('submit(addClientForm)', function (data) {
	    console.log(data.field);
		if(data.field.id){
			// 修改
			$.ajax({
			    url: apiUrl + '/index.php/agricultural/user/updateData?token=' + JSON.parse(window.sessionStorage.getItem('agricultural')).token,
			    data:data.field,
				type: 'POST',
			    success:function(res){
					// console.log(res)
					if(res.code == 0){
						layer.closeAll();
						layer.msg('修改成功')
						$('#editUserFixed').hide();
						editObj.update(data.field);
						getNavHtml();
					}else if(res.code == 2){
						tokenExpired()
					}else{
						layer.msg(res.msg)
					}
			        
			    },
			    complete:function(){
			        //loading.hide();
			    }
			});
		}else{
			// 添加
			$.ajax({
			    url: apiUrl + '/index.php/agricultural/user/addData?token=' + JSON.parse(window.sessionStorage.getItem('agricultural')).token,
			    data:data.field,
				type: 'POST',
			    success:function(res){
					// console.log(res)
					if(res.code == 0){
						layer.closeAll();
						layer.msg('添加成功')
						tableClientObj.reload();
						getNavHtml();
					}else if(res.code == 2){
						tokenExpired()
					}else{
						layer.msg(res.msg)
					}
			        
			    },
			    complete:function(){
			        //loading.hide();
			    }
			});
		}
				
	    return false;
	});

})
</script>


<style type="text/css">
	
	#addClientFixed{
		overflow: hidden;
	}
	#addClientFixed .layui-form-label{
		width: 115px;
	}
	#addClientFixed .layui-input-block{
		margin-left: 145px;
	}
	#addClientFixed .rightBlock .layui-form-label{
		width: 60px;
	}
	#addClientFixed .rightBlock .layui-input-block{
		margin-left: 100px;
	}
	#addClientFixed .formColItem{
		margin-bottom: 20px;
	}
	
</style>
